<template>
  <amap class="map" ref="myMap" v-bind="mapOptions" mapStyle="amap://styles/blue">
    <!-- <amap-map-type :show-traffic="true"></amap-map-type> -->
    <amap-traffic-layer v-if="showTraffic" autoRefresh/>
    <amap-marker
      v-show="showCamera"
      v-for="item in cameras"
      @click="(e) => { clickMarker(e, item)}"
      :icon="item | markerIconFilter"
      :key="item.id"
      :position="[item.x, item.y]"
      :offset="videoOffset"
    />
    <amap-circle
      v-show="showCircle"
      v-for="item in circles"
      :key="`circle${item.id}`"
      :fillOpacity="0.25"
      strokeColor=''
      :center="[item.x, item.y]"
      :radius="200"
    />
  </amap>
</template>
<script>
import { Amap, Marker, Circle, TrafficLayer, loadPlugins } from '@amap/amap-vue'
import { heatData } from './heatData'
import { fontSize } from '@/utils/filters/filters'
export default {
  name: 'mapContainer',
  components: {
    Amap,
    AmapMarker: Marker,
    AmapCircle: Circle,
    AmapTrafficLayer: TrafficLayer
  },
  props: {
    // 初始化属性
    options: {
      type: Object,
      default: () => {}
    },
    // 覆盖物
    makers: {
      type: Array,
      default: () => []
    },
    showTraffic: {
      type: Boolean,
      default: false
    },
    showCamera: {
      type: Boolean,
      default: false
    },
    showCircle: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  computed: {
    videoOffset () {
      const num = fontSize(-32)
      return [num, num]
    },
    cameras () {
      const { makers, showCamera } = this
      return showCamera ? makers : []
    },
    circles () {
      const { makers, showCircle } = this
      return showCircle ? makers : []
    },
    mapOptions () {
      const { options } = this
      return {
        zoom: 13,
        center: [120.406676, 30.27849], // [106.534793, 29.606487], //
        ...options
      }
    }
  },
  filters: {
    markerIconFilter (marker) {
      let icon = ''
      switch (marker.type) {
        case 'video':
          if (marker.state === 'warning') {
            icon = require('@/assets/img/icon/monitor-warn.png')
          } else {
            icon = require('@/assets/img/icon/monitor.png')
          }
          break
        default:
          icon = require('@/assets/img/icon/monitor.png')
      }
      return icon
    }
  },
  mounted () {
  },
  methods: {
    clickMarker (e, item) {
      this.$emit('markerClick', { e, item })
    },
    async showHeatMap () {
      let { heatMap } = this
      if (!heatMap) {
        heatMap = await this.createHeatMap()
        this.heatMap = heatMap
      }
      heatMap.show()
    },
    hideHeatMap () {
      if (this.heatMap) {
        this.heatMap.hide()
      }
    },
    async createHeatMap () {
      const AMap = this.$refs.myMap.$context.AMap
      const map = this.$refs.myMap.$map
      await loadPlugins(['AMap.HeatMap'])
      const heatMap = new AMap.HeatMap(map, {
        radius: 25, // 给定半径
        opacity: [0, 0.8]
      })
      heatMap.setDataSet({
        data: heatData,
        max: 100
      })
      return heatMap
    }
  }
}
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: calc(100% + 54px) !important;
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 0;
}
</style>
